<template>
  <div>
    <div class="nav">
      <van-nav-bar title="动态">
        <template #left>
          <van-icon name="apps-o" size="18" />
        </template>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="box">
      <div class="avatar">
        <img
          :src="state.avatar"
          alt=""
          style="
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: 20px;
          "
        />
      </div>
      <div class="main">
        <h5>{{ state.nickname }}</h5>
        <h6>{{ state.area }}</h6>
      </div>
      <div class="time">
        {{ state.time }}
      </div>
    </div>
    <div class="text">
      <div>{{ state.text }}</div>
      <div class="photos">
        <img :src="state.photos" alt="" style="width: 100%" />
      </div>
    </div>
    <div class="icon" @click='handleClick'>
      <img src="../../public/maobi.png" alt="" />
    </div>
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";
import { all } from "../api";
export default {
  setup() {
    const state = reactive({
      avatar: "../../public/1.webp",
      nickname: "给你买个棒棒糖",
      area: "陕西 西安",
      time: "7.22-15:59",
      text: "今天是个上分的好日子",
      photos: "../../public/3.jpg",
    });
    const handleClick = () => {
      window.location.href = 'http://localhost:3000/share'
    }
    /* onMounted(async () => {
      const res = await all();
      console.log(res);
    }); */
    return {
      state,
      handleClick
    };
  },
};
</script>

<style scoped>
.icon img {
    width: 40px;
    height: 40px;
  }
  .icon{
    width: 40px;
    height: 40px;
    position: fixed;
    right:20px;
    bottom: 220px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    background-color: palegreen;
    border-radius: 50%;
    opacity: 0.7;
  }
.box {
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
}
.avatar {
  width: 20%;
}
.main {
  width: 60%;
  padding-left: 10px;
}
.main h5 {
  margin: 0;
  color: #606266;
}
.main h6 {
  margin: 0;
  color: #909399;
}
.time {
  widows: 20%;
  font-size: 10px;
  color: #909399;
}
.phptos {
  width: 100%;
  height: 100%;
}
.text {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>